<template>
  <div class="container">
    <div class="container-404">
      <div class="container-404__bg"></div>
      <h3>
        <span>
          哎呀！出错了！
          <div class="watermelon"></div>
        </span>
      </h3>
      <p>
        你访问的页面不存在，请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
      </p>
      <router-link to="/" class="bullshit__return-home">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Page404',
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.container {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  .container-404 {
    text-align: center;
    h3 {
      margin-top: 30px;
      margin-bottom: 15px;
      font-size: 24px;
      font-weight: 700;
    }
  }
  .container-404__bg {
    margin: 100px auto 0;
    width: 540px;
    height: 200px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/image/404.gif);
  }
}
</style>
